<template>
    <h1>个人信息</h1>
    <div>
      姓名:{{person.name}}<br>
      年龄:{{person.age}}<br>
      <button @click="changeAge">更新年龄</button>
    </div>
</template>
<!-- 
   使用reactive来实现响应式的步骤
   1、导入reactive函数: import {reactive} from 'vue'
   2、调用reactive函数来定义响应式数据: let 变量=reactive<类型>(对象的初始值)
   3、操作reactive数据
-->
<script lang='ts' setup>
   import IPerson from '@/types/IPerson'
   import {reactive} from 'vue'
   let person=reactive<IPerson>({name:'Giles',age:20})
   const changeAge=()=>{
      person.age++
      console.log('年龄:',person.age);
      console.log('person',person);
   }
</script>

<style lang='scss' scoped>
</style>